<template>
    <div>
        <div class="header">
            <div><i class="iconfont icon-yonghu"></i>广西</div>
            <div>医疗救治定点医院和发热门诊一览</div>
        </div>
        <div class="content">
            <div style="width:140px;">
                <el-input placeholder="请输入医院名称"></el-input>
            </div>
            
            <div @click="toMap(item)" class="item" v-for="item in hos.list" :key = 'item.id'>
                <div class="left">
                    <div>{{item.name}}</div>
                    <div v-if="item.flags">{{item.flags}}</div>
                    <div v-else>暂无标记</div>
                    <div v-if="item.address">{{item.address}}</div>
                    <div v-else>地址暂无</div>
                </div>
                <div class="right">
                    <div><i class="iconfont icon-dingwei-"></i></div>
                    <div>{{GetDistance(item.latitude,item.longitude)}}KM</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapActions,mapState} from 'vuex'
export default {
    data(){
        return {
            obj: {
                page: 1,
                pageSize:100,
            },
            lat: 0,
            lng: 0
        }
  },
    computed: {
        ...mapState('hos',['hos'])
    },
    created() {
        this.findHos(this.obj);
        this.getLocation();
    },
  methods: {

      ...mapActions('hos',['findHos']),
      // 方法定义 lat,lng 
     GetDistance( lat1,  lng1,  lat2,  lng2){
            var radLat1 = lat1*Math.PI / 180.0;
            var radLat2 =this.lat*Math.PI / 180.0;
            var a = radLat1 - radLat2;
            var  b = lng1*Math.PI / 180.0 - this.lng*Math.PI / 180.0;
            var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
            Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
            s = s *6378.137 ;// EARTH_RADIUS;
            s = Math.round(s * 10000) / 10000;
            return s;
        },
      //获取当前位置
      getLocation() {

          navigator.geolocation.getCurrentPosition((res)=>{
              this.lat = res.coords.latitude;
              this.lng = res.coords.longitude;
              console.log(this.lat,this.lng);
          }, (err)=>{
              console.log(err);
          }, {
                enableHighAccuracy: true,/* 高精度定位*/
                timeout: 5000,
                maximumAge: 0
          });
      },
        toMap(val){
      this.$router.push({
          path:'/hos/detall',
          query:{
              one:val.latitude,
              two:val.longitude
          }
      })
  }
  }  ,
}
</script>

<style scoped>
.content .right div :first-child {
    padding-left: 20px;
}
.content .left div:nth-child(30) {
    color: #999;
    font-size: 14px;
}
.content .left div:nth-child(2){
    background-color: #ffb34e;
    border-radius: 5px;
    display: inline;
    font-size: 12px;
    padding: 5px;
    color: white;
}
.content .right div {
    height: 45px;
    line-height: 45px;
} 
.content .left div {
    height: 30px;
    line-height: 30px;
}
.content .item {
    margin-top:40px;
    border-bottom: 1px solid #ccc;
    height: 90px;
    padding: 0 20px;
}
.content .left {
    float: left;
}
.content .right {
    float: right;
}
.content {
    margin-top: 160px;
}
.header div:last-child {
    top: 55%;
    left: 3%;
}
.header div:first-child {
    top: 25%;
    left: 3%;
}
    .header div{
        position: absolute;
        font-size: 20px;
        color: white;
        font-weight: 800;
    }
    .header {
        height: 150px;
        background-image: url('http://39.96.21.48/2020_znn/visual-ui/static/img/bg1.efce26ef.png');
        background-size: 100% ;
        position: absolute;
        top:0;
        left: 0;
        right: 0;
    }

</style>